
<template>
  <view class="job-header-container" :class="currentTheme">
    <!-- 搜索区域 -->
    <view class="search-container">
      <view class="search-bar">
        <uni-icons type="search" size="16" color="#999" @click="handleSearch"></uni-icons>
        <input
          class="search-input"
          type="text"
          :placeholder="placeholderText"
          v-model="searchValue"
          @confirm="handleSearch"
        />
      </view>
    </view>

    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view v-for="(tab, index) in tabs" :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="onTabChange(index)"
      >
        {{ tab.label }}
      </view>
      <view class="location-container">
        <text class="location" @click="goToProvinceList">{{ city }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    type: { type: String, required: true }, // 组件类型: 'policy' 或 'job'
    currentTab: { type: Number, default: 0 },
    tabs: { type: Array, default: () => [
      { label: '最新' },
      { label: '推荐' }
    ]},
    placeholder: { type: String, default: '搜索' }
  },
  data() {
    return {
      searchValue: '',
      city: '选择城市', // 确保初始值正确
      currentTheme: 'theme1' // 添加主题数据
    }
  },
  computed: {
    // 根据类型动态设置占位符
    placeholderText() {
      return this.placeholder || (this.type === 'job' ? '搜索职位名称' : '搜索')
    }
  },
  mounted() {
    // 加载主题设置
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
    
    // 监听全局事件，根据type值判断是否响应
    this.citySelectedHandler = (data) => {
      // 只有当事件数据中的type与组件自身的type匹配时才处理
      if (data.type === this.type) {
        this.handleCitySelected(data.city);
      }
    };
    
    this.cityResetHandler = (data) => {
      // 只有当事件数据中的type与组件自身的type匹配时才处理
      if (data.type === this.type) {
        this.handleCityReset();
      }
    };
    
    uni.$on('city-selected', this.citySelectedHandler);
    uni.$on('city-reset', this.cityResetHandler);
    
    // 监听全局主题变化事件
    this.themeChangeHandler = (newTheme) => {
      this.currentTheme = newTheme;
    };
    uni.$on('global-theme-change', this.themeChangeHandler);
  },
  beforeDestroy() {
    // 移除全局事件监听，防止内存泄漏
    uni.$off('city-selected', this.citySelectedHandler);
    uni.$off('city-reset', this.cityResetHandler);
    uni.$off('global-theme-change', this.themeChangeHandler);
  },
  onShow() {
    // 重新加载主题设置，确保主题同步
    const savedTheme = uni.getStorageSync('currentTheme');
    if (savedTheme) {
      this.currentTheme = savedTheme;
    }
  },
  methods: {
    // 处理搜索
    handleSearch() {
      // 只触发事件，不直接调用 API
      this.$emit('handle-search', this.searchValue);
    },
    // 处理标签切换
    onTabChange(index) {
      this.$emit('on-tab-change', index);
    },
    // 跳转到城市列表
    goToProvinceList() {
      this.$emit('go-to-province');
    },
    // 处理城市选择
    handleCitySelected(city) {
      this.city = city;
      this.$emit('city-changed', city);
    },
    // 处理城市重置
    handleCityReset() {
      this.city = '选择城市';
      this.$emit('city-reset');
    }
  }
}
</script>

<style scoped>
.job-header-container {
  background-color: #ffffff;
  margin-bottom: 20rpx;
  width: 100%;
}

/* 搜索区域样式 */
.search-container {
  padding: 10px 15px;
  background-color: white;
}

.search-bar {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 15px;
  background-color: #f5f5f5;
  border-radius: 20px;
}

.search-input {
  flex: 1;
  height: 100%;
  font-size: 14px;
  margin-left: 8px;
  background: transparent;
}

/* 自定义导航栏样式 */
.nav-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
  background-color: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #eaeaea;
}

.tab-item {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.3s;
  color: #888;
}

.tab-item.active {
  color: #000; /* 选中时的颜色 */
}

.location-container {
  display: flex;
  align-items: center;
}

.location {
  font-size: 16px;
  color: #333;
  padding: 5px 0;
  cursor: pointer;
  background-color: #f5f5f5;
  border-radius: 4px;
  display: inline-block;
  padding: 5px 10px;
}

/* 主题样式 */
/* Theme1 - 蓝色主题 */
.theme1 .job-header-container {
  background-color: #F8FBFF;
}

.theme1 .search-container {
  background-color: #F8FBFF;
}

.theme1 .search-bar {
  background-color: #E8F4FD;
  border: 1px solid #D1E9F6;
}

.theme1 .nav-bar {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E8F4FD;
  box-shadow: 0 2rpx 8rpx rgba(74, 144, 226, 0.08);
}

.theme1 .tab-item {
  color: #5A6C7D;
}

.theme1 .tab-item.active {
  color: #4A90E2;
  font-weight: 600;
}

.theme1 .location {
  background-color: #E8F4FD;
  color: #4A90E2;
  border: 1px solid #D1E9F6;
}

/* Theme2 - 棕色/米色主题 */
.theme2 .job-header-container {
  background-color: #FDF8F3;
}

.theme2 .search-container {
  background-color: #FDF8F3;
}

.theme2 .search-bar {
  background-color: #F5E6D3;
  border: 1px solid #E8D5C4;
}

.theme2 .nav-bar {
  background-color: #FFFBF7;
  border-bottom: 1px solid #F5E6D3;
  box-shadow: 0 2rpx 8rpx rgba(160, 82, 45, 0.08);
}

.theme2 .tab-item {
  color: #6D4C41;
}

.theme2 .tab-item.active {
  color: #A0522D;
  font-weight: 600;
}

.theme2 .location {
  background-color: #F5E6D3;
  color: #A0522D;
  border: 1px solid #E8D5C4;
}

/* 禁用动画和过渡效果 */
* {
  transition: none !important;
  animation: none !important;
}
</style>